<template>
  <div class="app">
    <div class="join">
      <p style="font-size:0.5rem">新用户注册</p>
      <p>很高兴您将成为商城的会员(注册只需一步)</p>

      <!-- 手机号 -->
      <p class="pp" ref="ptext" style="width:92%">
        <input type="text" v-model="input" placeholder="手机号码" @blur="add" ref="text" />
        <span v-show="show">必填</span>
        <van-icon name="phone-o" />
      </p>
      <p v-show="!result" style="color:red;font-size:0.2rem;margin:0">手机号输入格式有误</p>
      <!-- 密码 -->
      <p class="pp" ref="ppass" style="width:92%">
        <input type="password" v-model="inputPass" placeholder="密码" @blur="pass" ref="pass" />
        <span v-show="showpass">必填</span>
        <van-icon name="closed-eye" @click="closedeye" v-show="!passeye" />
        <van-icon name="eye" @click="eye" v-show="passeye" />
      </p>
      <p v-show="!resultPass" style="color:red;font-size:0.2rem;margin:0">密码保持6~16位</p>

      <!-- 密码 -->
      <p class="pp" style="width:92%">
        <input type="password" v-model="inputPass" placeholder="确认密码" @blur="pass" />
        <span v-show="showpass"></span>
        <van-icon name="closed-eye" @click="closedeye" v-show="!passeye" />
        <van-icon name="eye" @click="eye" v-show="passeye" />
      </p>
      <!-- 用户 -->
      <p class="pp" style="width:92%">
        <input type="text" v-model="input" placeholder="用户" @blur="add" />
        <span v-show="show"></span>
        <van-icon name="phone-o" />
      </p>
      <!-- 图形验证码 -->
      <p class="pp" style="width:92%">
        <input type="text" style="width:50%" />
        <img src="https://api.it120.cc/small4/verification/pic/get" alt style="width:50%" />
      </p>
      <!-- 省市区 -->
      <van-cell is-link @click="showPopup">展示弹出层</van-cell>
      <van-popup v-model="shows" position="bottom" :style="{ height: '30%' }">
        <areaList areaList="areaList" />
      </van-popup>

      <!-- 接受验证码 -->
      <p class="pp yanZ" style="width:92%">
        <input type="text" />
        <button @click="onyz">{{yzvalue}}</button>
      </p>
      <!-- 注册 -->
      <div class="join-dl">
        <router-link to style="color:white">注册账号</router-link>
      </div>

      <!-- 已有账号？立即登录 -->
      <p style="text-align:center;">
        <router-link to="/userlogin" style="color:#549ff9">已有账号？立即登录</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import checkUserInfo from "../utils/phone";
import areaList from "../components/province";
export default {
  components: {
    areaList
  },
  data() {
    return {
      input: "", //绑定手机号输入框内容
      inputPass: "", //判断隐藏手机号输入错误
      show: false, //手机号必填是否隐藏
      showpass: false, //  密码框必填是否隐藏
      passeye: false, //   眼睛是否隐藏
      result: true, //绑定密码输入框内容
      resultPass: true, //判断隐藏密码输入错误
      shows: false,
      yzvalue: "获取验证码", //验证码
      yzshow: true //判断验证
    };
  },
  methods: {
    // 验证手机号
    add() {
      let text = this.$refs.text.value;
      if (text == "") {
        this.show = true;
        this.$refs.ptext.style.background = "rgb(255, 233, 228)";
        this.$refs.text.style.background = "rgb(255, 233, 228)";
      } else {
        this.show = false;
        this.$refs.ptext.style.background = "#F5F5F5";
        this.$refs.text.style.background = "#F5F5F5";
      }

      this.result = checkUserInfo.checkMobile(this.input);
      if (!this.result) {
        this.input = ""; //清空手机号的输入框
        this.$refs.ptext.style.background = "rgb(255, 233, 228)";
        this.$refs.text.style.background = "rgb(255, 233, 228)";
      } else {
        this.$refs.ptext.style.background = "rgb(225, 255, 223)";
        this.$refs.text.style.background = "rgb(225, 255, 223)";
      }
    },
    pass() {
      let pass = this.$refs.pass.value;
      if (pass == "") {
        this.showpass = true;
        this.$refs.ppass.style.background = "rgb(255, 233, 228)";
        this.$refs.pass.style.background = "rgb(255, 233, 228)";
      } else {
        this.showpass = false;
        this.$refs.ppass.style.background = "#F5F5F5";
        this.$refs.pass.style.background = "#F5F5F5";
      }

      this.resultPass = checkUserInfo.checkPass(this.inputPass);
      if (!this.resultPass) {
        this.inputPass = ""; //清空密码的输入框
        this.$refs.ppass.style.background = "rgb(255, 233, 228)";
        this.$refs.pass.style.background = "rgb(255, 233, 228)";
      } else {
        this.$refs.ppass.style.background = "rgb(225, 255, 223)";
        this.$refs.pass.style.background = "rgb(225, 255, 223)";
      }
    },
    closedeye() {
      this.$refs.pass.type = "text";
      this.passeye = true;
    },
    eye() {
      this.$refs.pass.type = "password";
      this.passeye = false;
    },
    showPopup() {
      this.shows = true;
    },
    onyz() {
      if (!this.yzshow) {
        return;
      }
      this.yzshow = !this.yzshow;
      let i = 5;
      let time = setInterval(() => {
        i--;
        this.yzvalue = i + "秒后再试";
        if (i == 0) {
          this.yzshow = !this.yzshow;
          this.yzvalue = "获取验证码";
          clearInterval(time);
        }
      }, 1000);
    }
  }
};
</script>

<style scoped>
@import "../assets/css/user.css";
.join {
  height: 110vh;
}
.yanZ input {
  width: 60%;
}
.yanZ button {
  width: 40%;
  height: 100%;
  border: none;
  background: #f5f5f5;
}
</style>